css styles — Dowell-Mail 1.0 documentation

Skip to content

# css styles

The styling for the temlates/maillib/home.html template can ebe found in the static/css/styles.css. Here is how it look:

      1@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
      2
      3
      4.formcarry-container * {
      5  box-sizing: border-box;
      6  font-family: "Inter", sans-serif;
      7
      8  /* colors */
      9  --color-blue: #2552d0;
     10  --color-light-blue: #3266e3;
     11  --color-gray: #e5e7eb;
     12  --color-dark-gray: #9da3ae;
     13  --color-pink: #edadd2;
     14}
     15
     16.formcarry-container {
     17  /* container */
     18  --c-width: 50%;
     19  --c-max-width: 500px;
     20
     21  width: var(--c-width);
     22  max-width: var(--c-max-width);
     23  display: block;
     24  margin: 5vh auto 0 auto;
     25}
     26
     27.formcarry-form label {
     28  display: block;
     29  padding: 12px 0 2px 0;
     30  letter-spacing: -0.2px;
     31  cursor: pointer;
     32  font-size: 16px;
     33  font-weight: 700;
     34}
     35
     36.formcarry-form input,
     37.formcarry-form textarea {
     38  font-size: 16px;
     39  display: block;
     40  width: 100%;
     41  padding: 5px;
     42  background-color: var(--color-gray);
     43  border: none;
     44  border: 4px solid var(--color-gray);
     45  outline: none;
     46  border-radius: 8px;
     47  color: var(--color-dark-gray);
     48}
     49
     50.formcarry-form input:focus,
     51.formcarry-form textarea:focus {
     52  background-color: #fff;
     53  color: var(--color-dark-gray);
     54}
     55
     56.formcarry-form input:focus:required:invalid {
     57  border-color: var(--color-pink);
     58  background-color: #fff;
     59}
     60
     61.formcarry-form button {
     62  display: block;
     63  margin-top: 12px;
     64  width: 100%;
     65  padding: 12px 20px;
     66  border-radius: 8px;
     67  border-color: transparent;
     68  background-color: var(--color-blue);
     69  color: #fff;
     70  font-weight: 700;
     71  font-size: 18px;
     72
     73  transition: 300ms all;
     74}
     75
     76.formcarry-form button:hover {
     77  background-color: var(--color-light-blue);
     78}
     79
     80.formcarry-alert {
     81  padding: 12px;
     82  border-radius: 10px;
     83  color: #fff;
     84  font-size: 14px;
     85  font-weight: 400;
     86  margin-top: 12px;
     87  display: none;
     88}
     89
     90.formcarry-alert.visible {
     91  display: block;
     92}
     93
     94.formcarry-alert.success {
     95  background: #69cf9d;
     96}
     97
     98.formcarry-alert.error {
     99  background: #de524c;
    100}
    101
    102.alert {
    103  padding: 20px;
    104  background-color: #36f46c;
    105  color: white;
    106  margin-bottom: 15px;
    107}